<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  Document,Menu as IconMenu, Monitor,Setting
} from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';

const route = useRoute();
const router = useRouter();

// 动态面包屑数据 - 使用route.matched自动生成
const breadcrumbList = computed(() => {
  //过滤出包含 meta.breadcrumb 属性的路由记录,对应的需要在路由中设置meta.breadcrumb: true
  const matched = route.matched.filter(record => record.meta && record.meta.breadcrumb);
  if (matched.length === 0) {
    return [{ title: '首页', path: '/admin/home' }];
  }
  const crumbs = [];
  // 遍历所有匹配的路由记录
  //提取每个路由的 meta.title 作为面包屑标题
  //除了最后一个路由外，其他路由都设置 path 属性（最后一个面包屑通常不带链接
  matched.forEach((record, index) => {
    const path = record.path;
    const title = record.meta.title;
    if (title) {
      crumbs.push({
        title,
        path: index < matched.length - 1 ? path : undefined
      });
    }
  });

  // 确保首页总是在最前面
  if (crumbs.length > 0 && crumbs[0].title !== '首页') {
    crumbs.unshift({
      title: '首页',
      path: '/admin/home'
    });
  }
  return crumbs;
});

// 退出登录处理
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里添加实际的登出逻辑
    localStorage.removeItem('token')
    localStorage.removeItem('nickName')
    localStorage.removeItem('avatar')
    localStorage.removeItem('uid')
    router.push('/login');
  }).catch(() => {
    // 取消退出
  });
};
</script>


<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <header class="header-nav">
      <div class="header-left">
        <h1 class="system-title">后台管理系统</h1>
      </div>
      <div class="header-right">
        <el-dropdown trigger="click">
          <span class="user-info">
            <el-avatar :size="35" class="user-avatar"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <span class="user-name">管理员</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 左侧固定菜单栏 -->
    <div class="sidebar">
      <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="route.path" text-color="#fff">
        <el-menu-item index="/admin/home">
          <el-icon>
            <Monitor />
          </el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="/admin/movieManage">
          <el-icon>
            <IconMenu />
          </el-icon>
          <span>电影管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/reviewManage">
          <el-icon>
            <Document />
          </el-icon>
          <span>影评管理</span>
        </el-menu-item>

        <el-sub-menu index="/admin/systemSettings">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/admin/systemSettings/userManage">用户管理</el-menu-item>
          <el-menu-item index="/admin/systemSettings/roleManage">角色管理</el-menu-item>
          <el-menu-item index="/admin/systemSettings/menuManage">菜单管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <!-- 动态面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index"
            :to="index < breadcrumbList.length - 1 ? item.path : undefined"
            :disabled="index === breadcrumbList.length - 1">
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="content-wrapper">
        <!-- 路由内容区域 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>



<style scoped>
.layout-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* 顶部导航栏样式 */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #434a50;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
}

.system-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
}

.user-avatar {
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
}

/* 左侧菜单栏 */
.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 200px;
  background-color: #545c64;
  overflow-y: auto;
  z-index: 1000;
}

/* 右侧内容区域 */
.main-content {
  flex: 1;
  margin-top: 60px;
  margin-left: 200px;
  min-height: calc(100vh - 60px);
  background-color: #f5f7fa;
}

/* 面包屑导航 */
.breadcrumb {
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
}

/* 响应式设计 - 小屏幕适配 */
@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }

  .main-content {
    margin-left: 60px;
  }

  .system-title {
    font-size: 16px;
  }

  .user-name {
    display: none;
  }
}
</style>